<template>
    <div class="messageAll">
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="1000px"
                :before-close="handleClose">
            <div slot="title" class="header-title" style="padding: 20px 0;" >
                <span class="title-name" style="color: #39A5EF">全部消息</span>
<!--                <span class="title-read" @click="readAll">全部标为已读</span>-->
<!--                <span class="title-empty" @click="empty">清空</span>-->
            </div>

          <div class="scrollbar" style="height: 360px;overflow: auto">
            <el-scrollbar>
              <div class="box" v-for="(i,index) in listAll" :key="index" @click="getDetail(i)" style="margin-top: 10px">
                <div class="item-box" style="overflow: hidden; width: 880px">
                  <div style="float: left;padding-top: 15px">
                    <el-badge is-dot class="item" :hidden="i.status===1">
                      <div class="XiaoXi"><i class="el-icon-message-solid" style="font-size: 25px"></i></div>
                    </el-badge>
                  </div>
                  <div style="float: left;margin-left: 20px;height: 68px;width: 760px">
                    <div style="overflow: hidden;">
                      <div  style="float: left;font-size: 16px;" :class="{'read':i.status===1}">{{i.title}}</div>
                      <div style="float: right;font-size: 14px" :class="{'read':i.status===1}">{{i.createTime}}</div>
                    </div>
                    <div :class="{'read':i.status===1}" style="margin-top: 5px;text-align: left">{{i.content}}</div>
                  </div>
                </div>
              </div>

            </el-scrollbar>

          </div>
          <div slot="title"  style="padding: 20px 0;" class="Posi">
            <span  @click="readAll">全部标为已读</span>
            <span  style="padding-left: 80px">清空</span>
          </div>
        </el-dialog>


        <message-detail :detailShow="detailShow" :detail="detail" @detailClose="detailClose"></message-detail>

    </div>
</template>

<script>
  import MessageDetail from './messageDetail'
  import { getAllRead } from '../api/login'
  export default {
    name: 'messageAll',
    components: { MessageDetail },
    props:{
      dialogVisible:{
        type:Boolean,
        default:false
      },
      listAll:Array
    },
    data(){
      return{
        detailShow:false,
        detail:{},
        list:[]
      }
    },
    methods:{
      handleClose(){
        this.$emit('close')
      },
      readAll(){
        getAllRead({studentId:this.$store.state.user.userInfo.id,status:1}).then(res=>{
          if (res.code === 200){
            this.$emit('getAll')
          }
        })
      },
      // empty(){
      //   console.log ('清空')
      // },
      getDetail(data){
        this.detail = data
        this.detailShow = true

      },
      detailClose(){
        this.detailShow = false
        this.$emit('getAll')
      }
    }

  }
</script>

<style scoped lang="less">
/deep/.el-dialog__body{
  padding: 0 20px;
  color: rgba(48, 48, 48, 1);
}
.Posi{
  position: absolute;
  top: 445px;
  left: 710px;
  span:hover{
    cursor: pointer;
  }
}
/deep/.el-dialog__header{
  position: relative;
}
/deep/.el-dialog__headerbtn{
  top: 40px;
  font-size: 24px;
}
.XiaoXi{
  position: relative;
  width: 38px;
  height: 38px;    border-radius: 50%;
  background: #39A5EF;
  text-align: center;
  line-height: 20px;
  color: #fff;
margin-left: 50px;
  .el-icon-message-solid{
    font-size: 25px;
    position: absolute;
    top: 5px;
    left: 7px;
  }
}
    .read{
        color: #999999;
    }
    .messageAll{
        ::v-deep.el-dialog{
            .el-dialog__header{
                border-bottom: 1px solid #e8e8e8;
                width: 95%;
                margin: 0 auto;
                padding: 20px 20px 10px 0;
            }
            .header-title{
                >.title-name{
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    line-height: 18px;
                }
                >.title-read{
                    padding-left: 850px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #999999;
                    line-height: 18px;
                }
                >.title-read:hover,.title-empty:hover{
                    cursor: pointer;
                }
                .title-empty{
                    padding-left: 30px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #999999;
                    line-height: 18px;
                }
            }
        }
        .box{
          width: 100% !important;
            .item-box{
                >.top{
                    margin: 10px 0;
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    text-align: left;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    line-height: 18px;
                    .img{
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        background: #39A5EF;
                        text-align: center;
                        line-height: 20px;
                        color: #fff;
                        i{
                            margin-right: 0;
                        }
                    }
                    >.title{
                        width: 870px;
                        margin-left: 10px;
                        display: -webkit-box;
                        overflow: hidden;
                        -webkit-box-orient:vertical;
                        -webkit-line-clamp:1;
                    }
                }
                >.content{
                    width: 1009px;
                    text-align: left;
                    margin: 0 auto;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:2;
                }
            }
        }
        .box:hover{
            background-color: #ecf5ff;
            color: #66b1ff;
            cursor: pointer;
        }
    }


</style>
